<template>
  <div class="parkPictureWrap" ref="parkPictureWrap">
    <div class="pageTableInner">
      <div class="infoSearchWrap">
        <div class="infoSearchOne">
          <el-row :gutter="20">
            <el-col :span="4">
              <div class="searchWrap">
                <span class="searchFont">区域类型:</span>
                <span class="searchInputFont">
                   <el-radio-group size="mini" v-model="searchInfo.type" @change="selectGovAreaMap()">
                    <el-radio-button v-for="(item,index) in typeList" :key="index" :label="item.value">{{item.label}}</el-radio-button>
                  </el-radio-group>
                </span>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="searchWrap">
                <span class="searchFont">责任企业:</span>
                <span class="searchInputFont">
                    <el-select v-model="searchInfo.enterpriseNo" size="mini" @change="searchRowsInfo" clearable placeholder="全部">
                      <el-option
                        v-for="item in this.$store.state.companyInfos"
                        :key="item.enterpriseNo+''"
                        :label="item.enterpriseName"
                        :value="item.enterpriseNo+''">
                      </el-option>
                    </el-select>
                </span>
              </div>
            </el-col>
            <el-col :span="7">
              <div class="searchWrap">
                <span class="searchFont">日期:</span>
                <span class="searchInputFont">
                 <el-date-picker
                   style="width: 100%;"
                   v-model="value6"
                   type="daterange"
                   align="left"
                   placeholder="选择日期范围"
                   size="mini"
                   :picker-options="$store.state.pickerOptions2">
                  </el-date-picker>
                </span>
              </div>
            </el-col>
            <div style="float: right;margin-right: 10px;">
<!--              <el-button type="primary" size="mini" @click="selectGovAreaMap()">查询</el-button>-->
              <el-button type="primary" v-loading="btnLoading" style="margin-left: 10px" size="mini" @click="dataExport()">数据导出</el-button>
            </div>
          </el-row>
        </div>
      </div>
      <div class="mapContentWrap">
        <mapBicycletest
          :areaInfo="areaInfo"
          :colorslist="colorslist"
          :district="searchInfo.district"
          :bicycleCount="bicycleCount"
          :bicycleList="bicycleList"
          ref="mapFun"
          @selectGovAreaMap="selectGovAreaMap"
        ></mapBicycletest>

      </div>
    </div>
  </div>
</template>
<script>
  import mapBicycletest from "./mapRack.vue"

  export default {
    props: [],
    data(){
      return {
        value6:'',
        searchInfo: {
          areaName: "",
          type: "0",
          district: 1,//this.$store.state.userInfo.regionId,
          street: 13,
          areaStatus: 0,
          enterpriseNo:''
        },
        streetData: [],
        typeList: [
          // {label: "全部", value: ""},
          {label: "停放区", value: 0},
          // {label: "监控区", value: 1},
          // {label: "电子围栏", value: 2},
          // {label: "禁停区", value: 3},
        ],
        colorslist: [{
          color: '#00a436',
          label: '停放区',
          areaType: 0,
          count: '0'
        },{
          color: '#00b2ed',
          label: '监控区',
          areaType: 1,
          count: '0'
        },{
          color: '#567aff',
          label: '电子围栏',
          areaType: 2,
          count: '0'
        },{
          color: '#ff5656',
          label: '禁停区',
          areaType: 3,
          count: '0'
        }],
        areaInfo:[[],[],[],[],[]],
        bicycleCount:[],
        bicycleList:[],
        btnLoading:false
      }
    },
    components: {
      mapBicycletest
    },
    created(){
      // 获取首次数据
      this._getIllegalDeliveryList()
      this.selectGovAreaMap()
      this.changeDistrict(this.searchInfo.district)
    },
    mounted() {

    },
    destroyed(){

    },
    methods: {
      dataExport(){
        this.btnLoading = true
        let params = {
          enterpriseNo:this.searchInfo.enterpriseNo,
          beginTime:'',
          endTime:''
        }
        if(this.value6 && this.value6.length > 0){
          params.beginTime = this.dtime(this.value6[0]).format('YYYY-MM-DD 00:00:00')
          params.endTime = this.dtime(this.value6[1]).format('YYYY-MM-DD 23:59:59')
        }else{
          params.beginTime =''
          params.endTime = ''
        }
        this.axios.post(process.env.API_HOST + `area/downloadIllegalDeliveryData`,params,{responseType: 'blob'})
          .then(response => {
            const result = response.data
            this.btnLoading = false
            if(result){
              this.downloadHandler(result,'违投数据' + (new Date()).getTime() + '.xlsx')
            }
          })
      },
      downloadHandler(data, fileName, type) {
        // 匹配任意文件类型：type : "application/octet-stream"
        let blob = new Blob([data]);
        // 获取heads中的filename文件名
        let downloadElement = document.createElement('a');
        // 创建下载的链接
        let href = window.URL.createObjectURL(blob);
        downloadElement.href = href;
        // 下载后文件名
        downloadElement.download = fileName;
        document.body.appendChild(downloadElement);
        // 点击下载
        downloadElement.click();
        // 下载完成移除元素
        document.body.removeChild(downloadElement);
        // 释放掉blob对象
        window.URL.revokeObjectURL(href);
      },
      _getIllegalDeliveryList(){
        this.axios.post(process.env.API_HOST + 'area/getIllegalDeliveryList', {})
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.bicycleList = result.result.bicycleList
              this.bicycleCount = result.result.bicycleCount
            }
          })
      },
      //改变行政区 获取街道
      changeDistrict(district){
        if(!district){
          this.streetData=[]
          return
        }
        this.axios.post(process.env.API_HOST + '/common/selectRegion', {parentId: district})
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.streetData = result.result
              this.checkstreet()
            }
          })
      },
      //改变街道
      checkstreet(){
        // this.selectGovAreaMap()
        if(!this.searchInfo.street){
          this.changeDistrict(this.searchInfo.district)
        }
        this.streetData.forEach(item => {
          if (item.id == this.searchInfo.street && item.regionPoints) {
            setTimeout(()=>{
              this.$refs.mapFun.getBoundary(JSON.parse(item.regionPoints))
            },100)
          }
        })
      },
      selectGovAreaMap(){
        this.axios.post(process.env.API_HOST + `/facilities/selectFacilitiesMap`,this.searchInfo)
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.areaInfo=[[],[],[],[],[]]
              if (result.result.length > 0) {
                result.result.forEach((item) => {
                  this.areaInfo[item.type].push({
                    ...item,
                    areaPoints: item.areaPoints ? JSON.parse(item.areaPoints) : []
                  })
                })
              }
              this.colorslist.forEach(item => {
                item.count = this.areaInfo[item.areaType].length
              })
              console.log(this.colorslist)
              this.checkstreet()
            }
          })
      },

    }
  }
</script>


<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  .parkPictureWrap
    page()
    .mapContentWrap
      position absolute;
      left 0px;
      right 0px
      bottom 0px
      top 78px
      padding: 10px;
      box-sizing: border-box;
      border-radius: 5px;
      background-color: white;
</style>
